/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <el-header>
      <div class="DataTime">
        <div>总成装配线看板</div>
        <div style="font-size: 17px">
          <div v-if="isPaused">{{ formattedDate }}</div>
          <div v-else>{{ formattedDate }}</div>
        </div>
      </div>
    </el-header>
    <div class="messageInfo">
      <div>现场负责人:系统管理员周</div>
      <div>品质负责人: 系统管理员吴</div>
      <div>工艺设备负责人:系统管理员郑</div>
    </div>

    <div>
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="st-gbox">
            <div class="cavasbox" ref="SCEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="st-gbox">
            <div class="SecondIcon">
              <div class="SecondItem" v-for="item in 40" :key="item">
                <div class="SecondName">OP10-2</div>
                <div class="secondStat">
                  <div>状态:</div>
                  <div style="color: #12cf76">自动</div>
                </div>
              </div>
            </div>
            <!-- <div class="cavasbox" ref="SUMEchart"></div> -->
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="40">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="sign">
              <div class="signItem">产品型号</div>
              <div class="signItem">计划数量</div>
              <div class="signItem">合格数量</div>
              <div class="signItem">不良数量</div>
            </div>
            <div class="sign" style="background-color: #3f72ab">
              <div class="signItem">AE86</div>
              <div class="signItem">30000</div>
              <div class="signItem">20900</div>
              <div class="signItem">70</div>
            </div>
            <!-- <div class="cavasbox" ref="payEchart"></div> -->
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import Chart from "echarts";
import * as Chart from 'echarts';
export default {
  name: "welcome",
  data() {
    return {
      date: new Date(),
      intervalId: null,
      isPaused: false,
      machineNo: "",
      type: "day",
      //  销售总笔数
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        title: {
          left: "center",
          top: "9",
          text: "每小时生产数量",
          textStyle: {
            color: "#fdfdfe", // 设置标题文本的颜色
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fdfdfe", //时间轴的颜色
            width: 1,
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: "#fdfdfe", //时间的颜色
            },
          },
        },
        legend: {
          data: ["合格数量"],
          x: "center",
          y: "bottom",
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#fdfdfe",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "00:00",
              "02:00",
              "04:00",
              "06:00",
              "08:00",
              "10:00",
              "12:00",
              "14:00",
              "16:00",
              "18:00",
              "20:00",
              "22:00",
            ],
            color: "#fdfdfe",
            axisLine: {
              lineStyle: {
                color: "#fdfdfe", //时间轴的颜色
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              margin: 14,
              textStyle: {
                fontSize: 12,
                color: "#fdfdfe",
              },
            },
          },
        ],
        series: [
          {
            name: "合格数量",
            type: "bar",
            data: [0, 0, 0, 0, 24, 23, 28, 10, 5, 0, 3, 2],
            barWidth: 20,
            barGap: 0,
            itemStyle: {
              normal: {
                color: "#73d98d",
              },
            },
          },
        ],
      },

      payNumoption: {
        title: {
          subtext: "达成率",
          subtextStyle: {
            color: "#FFF", // 设置子文本颜色
            fontSize: 18, // 设置子文本大小
          },
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "完成率" },
              { value: 235, name: "未完成率" },
              
            ],
            color: ['#ffc10a', '#75d378'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getSCE();
    this.getSUM();
    // this.getClick();
    // this.getpay();
    this.getpayNum();
    this.intervalId = setInterval(() => {
      this.date = new Date();
    }, 1000);
  },
  computed: {
    formattedDate() {
      const year = this.date.getFullYear();
      const month = this.date.getMonth() + 1; // 月份从0开始，所以需要加1
      const day = this.date.getDate();
      const hours = this.date.getHours();
      const minutes = this.date.getMinutes();
      const seconds = this.date.getSeconds();
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekdayText = weekdays[this.date.getDay()];
      // 格式化日期和时间
      const formattedTime = `${year}年${month < 10 ? "0" + month : month}月${
        day < 10 ? "0" + day : day
      }日 ${hours < 10 ? "0" + hours : hours}时${
        minutes < 10 ? "0" + minutes : minutes
      }分${seconds < 10 ? "0" + seconds : seconds}秒 ${weekdayText}`;

      return formattedTime;
    },
  },
  // 里面的函数只有调用才会执行
  methods: {
    pauseTimer() {
      clearInterval(this.intervalId);
      this.isPaused = true;
    },
    resumeTimer() {
      this.intervalId = setInterval(() => {
        this.date = new Date();
      }, 1000);
      this.isPaused = false;
    },
    // 交易总笔数
    getSCE() {
      this.chart = Chart.init(this.$refs.SCEchart);
      this.chart.setOption(this.option);
    },
    // 交易总金额
    getSUM() {
      // this.chart = Chart.init(this.$refs.SUMEchart);
      // this.chart.setOption(this.SUMoption);
    },
    // 总点击量
    // getClick() {
    //   this.chart = Chart.init(this.$refs.ClickEchart);
    //   this.chart.setOption(this.Clickoption);
    // },
    // 支付方式统计
    // getpay() {
    //   this.chart = Chart.init(this.$refs.payEchart);
    //   this.chart.setOption(this.payoption);
    // },
    // 支付方式统计
    getpayNum() {
      this.chart = Chart.init(this.$refs.payNumEchart);
      this.chart.setOption(this.payNumoption);
    },
  },
};
</script>
<style>
.messageInfo {
  display: flex;
  justify-content: space-between;
  border-top: 2px solid #93d9f3;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
}
.DataTime {
  display: flex;
  margin-left: 36%;
  justify-content: space-around;
}
.sign {
  display: flex;
}
.signItem {
  flex: 1;
  height: 40px;
  border-right: 1px solid #fff;
  color: #fff;
  line-height: 40px;
}
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #56708b;
  padding: 0 30px;
}

.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #3b7cb2;
  border-radius: 5px;
  height: 40vh;
  box-sizing: border-box;
}
.SecondIcon {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  background-color: #3b7cb2;
}
.SecondItem {
  width: 10%;
  height: 33px;
  border: 2px solid #fff;
  margin: 8px 8px 0 0;
  border-radius: 5px;
}
.SecondName {
  font-size: 12px;
  color: #e6b3ab;
  font-weight: 600;
}
.secondStat {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  display: flex;
  justify-content: space-around;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #3b7cb2;
}
.paybox {
  width: 100%;
  background-color: #3b7cb2;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 30vh;
}
.el-header {
  background-color: #56708b;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 60px;
}
</style>